import { Menu } from 'antd'
import { MenuType } from 'Model/userCenter'
import React, { useState } from 'react'
import BanList from './BanList'
import BasicSetting from './BasicSetting'
import './index.scss'
import UserInfo from './UserInfo'

const UserCenter = () => {
  const [menuType, setMenuType] = useState<MenuType>(MenuType.BasicSetting)
  return (
    <div className="user-center">
      <div className="ts-menu">
        <ul className="ts-menu-list">
          <li className={`ts-menu-list-item ${menuType === MenuType.BasicSetting?'active':''}`} onClick={(e) => setMenuType(MenuType.BasicSetting)}>
            <svg
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5677"
              width="20"
              height="20"
            >
              <path
                d="M372.134088 1004.846981a509.94041 509.94041 0 0 1-159.298198-76.821527l2.164315-103.514738a93.088793 93.088793 0 0 0-74.238313-93.088794l-101.536602-20.991523A509.428422 509.428422 0 0 1 0.011636 537.983409l82.243949-62.834935a93.088793 93.088793 0 0 0 26.507034-116.104998l-46.89348-92.390627A514.152678 514.152678 0 0 1 172.225904 128.415991l100.419536 25.133974a93.088793 93.088793 0 0 0 107.284834-51.664281l43.007023-94.252403a515.246472 515.246472 0 0 1 88.434354-7.610009c30.137497 0 59.669917 2.606486 88.411081 7.610009l43.007023 94.252403a93.088793 93.088793 0 0 0 107.284834 51.664281l100.396264-25.133974a514.152678 514.152678 0 0 1 110.356765 138.236858l-46.870208 92.390627a93.088793 93.088793 0 0 0 26.483762 116.104998l82.243949 62.834935a509.428422 509.428422 0 0 1-39.213654 172.44699l-101.51333 20.968251a93.088793 93.088793 0 0 0-74.238312 93.088793l2.141042 103.538011a509.94041 509.94041 0 0 1-159.298198 76.798255l-79.684007-66.279221a93.088793 93.088793 0 0 0-119.060567 0l-79.684007 66.302493zM511.348378 721.461421a209.449785 209.449785 0 1 0 0-418.89957 209.449785 209.449785 0 0 0 0 418.89957z"
                p-id="5678"
                fill="#707070"
              ></path>
            </svg>
            <span>基础设置</span>
          </li>
          <li className={`ts-menu-list-item ${menuType === MenuType.UserInfo?'active':''}`} onClick={(e) => setMenuType(MenuType.UserInfo)}>
            <svg
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4722"
              width="20"
              height="20"
            >
              <path
                d="M512 273.066667m-273.066667 0a273.066667 273.066667 0 1 0 546.133334 0 273.066667 273.066667 0 1 0-546.133334 0Z"
                p-id="4723"
                fill="#707070"
              ></path>
              <path
                d="M375.466667 614.4h273.066666a341.333333 341.333333 0 0 1 341.333334 341.333333v68.266667H34.133333v-68.266667a341.333333 341.333333 0 0 1 341.333334-341.333333z"
                p-id="4724"
                fill="#707070"
              ></path>
            </svg>
            <span>个人资料</span>
          </li>
          <li className={`ts-menu-list-item ${menuType === MenuType.BanList?'active':''}`} onClick={(e) => setMenuType(MenuType.BanList)}>
            <svg
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5936"
              width="20"
              height="20"
            >
              <path
                d="M924.5 338.9c-22.5-53.2-54.7-101-95.7-142s-88.8-73.2-142-95.7c-55.1-23.3-113.6-35.1-173.9-35.1-60.3 0-118.8 11.8-173.9 35.1-53.2 22.5-101 54.7-142 95.7s-73.2 88.8-95.7 142C77.9 394 66.1 452.5 66.1 512.8c0 60.3 11.8 118.8 35.1 173.9 22.5 53.2 54.7 101 95.7 142s88.8 73.2 142 95.7c55.1 23.3 113.6 35.1 173.9 35.1 60.3 0 118.8-11.8 173.9-35.1 53.2-22.5 101-54.7 142-95.7s73.2-88.8 95.7-142c23.3-55.1 35.1-113.6 35.1-173.9 0.1-60.3-11.7-118.8-35-173.9zM130.1 512.8c0-102.2 39.8-198.3 112.1-270.6 72.3-72.3 168.4-112.1 270.6-112.1 89.8 0 174.9 30.7 243.3 87.3L217.4 756.2c-56.5-68.4-87.3-153.5-87.3-243.4z m653.4 270.7c-72.3 72.3-168.4 112.1-270.6 112.1-93.1 0-181.2-33-250.8-93.6L802 262.1c60.5 69.6 93.6 157.6 93.6 250.8 0 102.2-39.8 198.3-112.1 270.6z"
                p-id="5937"
                fill="#707070"
              ></path>
            </svg>
            <span>封禁列表</span>
          </li>
        </ul>
      </div>
      <div className="menu-content">
        {menuType === MenuType.BasicSetting && <BasicSetting />}
        {menuType === MenuType.UserInfo && <UserInfo />}
        {menuType === MenuType.BanList && <BanList />}
      </div>
    </div>
  )
}

export default UserCenter
